<template>
	
	<view class="myBg">
		<myBar :opacity="barOpct"></myBar>
		<!-- 个人信息 -->
		<view class="userInfoBox">
			<view class="userInfo" @tap="toNewPage"  data-url="setting">
				<image :src="userInfo && userInfo.pic ? userInfo.pic : '../../static/userPic.png'"></image>
				<view class="infoBox">
					<view class="nameBox">
						<text class="userName">{{ userInfo ? userInfo.nickname : '未登录' }}</text>
						<view class="vipBox" v-if="userInfo && userInfo.code">
							<text class="iconfont icon-zuanshihuiyuan"></text>
							<text class="">合伙人</text>
						</view>
					</view>
					<view class="codeBox" v-if="isLogin && userInfo.code" @tap.stop="copyCode">
						<text class="code">邀请码{{ userInfo.code }}</text>
						<text class="copy">复制</text>
					</view>
				</view>
			</view>
			<view class="setBtnBox"><image src="../../static/setting.png" @tap="toPage" data-url="setting"></image></view>
			
			<view v-if="isLogin" class="memberEnter" @tap="toPage" data-url="memberList" data-select="0">
				<text>学员列表</text>
				<text class="iconfont icon-right"></text>
			</view>
		</view>

		<!-- 订单入口 -->
		<view class="orderEnter">
			<view class="boxTitle">
				<text class="tt1">我的订单</text>
				<text class="tt2" @tap="toNewPage" data-url="orderList">查看全部</text>
				<text class="iconfont icon-right" @tap="toNewPage" data-url="orderList"></text>
			</view>
			<view class="enterBox">
				<view class="enterItem" @tap="toNewPage" data-url="orderList" data-status="20">
					<image src="https://test.hawklu.com/capp/order1.png"></image>
					<text>待付款</text>
				</view>
				<view class="enterItem" @tap="toNewPage" data-url="orderList" data-status="5">
					<image src="https://test.hawklu.com/capp/order2.png"></image>
					<text>待开课</text>
				</view>
				<view class="enterItem" @tap="toNewPage" data-url="evaluateList">
					<image src="https://test.hawklu.com/capp/order5.png"></image>
					<text>评价</text>
				</view>
				<view class="enterItem" @tap="toNewPage" data-url="refoundList">
					<image src="https://test.hawklu.com/capp/order4.png"></image>
					<text>退款</text>
				</view>
			</view>
		</view>
		<!-- 我的福利入口 -->
		<view class="orderEnter" v-if="isLogin && showmyold">
			<view class="boxTitle">
				<text class="tt1">我的福利</text>
				<text class="tt2" @tap="toNewPage" data-url="myoldnew">老带新福利</text>
				<text class="iconfont icon-right" @tap="toNewPage" data-url="myoldnew"></text>
			</view>
			<view class="enterBox3" >
				<view class="imgboxxx" v-for="(item,index) in oldlist" :key="index"  @tap="toNewPage" data-url="myoldnew">
					<image :src="'http://cdn.peixun.de123.com'+item.img" mode=""></image>
				</view>					
				<view class="imgboxxx" v-for="(item,index) in newlist" :key="index"  @tap="toNewPage" data-url="myoldnew">
					<image :src="'http://cdn.peixun.de123.com'+item.img" mode=""></image>
				</view>					
			</view>
		</view>

		
		<!-- 订单入口 -->
		<view class="orderEnter ">
			<view class="enterBox enterBox2">
				<view class="enterItem" @tap="toNewPage" data-url="car">
					<image src="../../static/gouwuche.png"></image>
					<text>购物车</text>
				</view>
				
				<view class="enterItem" @tap="toNewPage" data-url="myCoupon">
					<image src="../../static/youhui.png"></image>
					<text>优惠券</text>
				</view>				
				<view class="enterItem" @tap="toPage" data-url="groupList">
					<image src="../../static/pintuan.png"></image>
					<text>拼团活动</text>
				</view>
				<view class="enterItem" @tap="toNewPage" data-url="mybaoming">
					<image src="../../static/cghd.png"></image>
					<text>报名活动</text>
				</view>
				<view class="enterItem" @tap="toNewPage" data-url="myCollection">
					<image src="../../static/guanzhu.png"></image>
					<text>我的关注</text>
				</view>
			
			</view>
		</view>

		<view class="orderEnter">
			<view class="boxTitle"></view>
			<view class="enterBox">
				<view class="enterItem enterItem2" @tap="toNewPage" data-url="groupReturn">
					<image src="../../static/tixian.png"></image>
					<text>提现</text>
				</view>
				<view class="enterItem enterItem2" @tap="toNewPage" data-url="joinTeam" v-if="!isLogin || !userInfo.code">
					<image src="https://test.hawklu.com/capp/group4.png"></image>
					<text>加入合伙人</text>
				</view>
				<view class="enterItem enterItem2" v-if="isLogin && userInfo.code" @tap="toNewPage" data-url="myTeam">
					<image src="../../static/temp.png"></image>
					<text>我的团队</text>
				</view>
				<view class="enterItem enterItem2"  @tap="myzhaoshang">
					<image src="../../static/zhaoshang.png"></image>
					<text>我的招商</text>
				</view>
				<view class="enterItem enterItem2" @tap="toCvDt" data-url="conversationDt">
					<image src="../../static/userkefu.png"></image>
					<text>客服</text>
				</view>
				<view class="enterItem enterItem2"  @tap="toNewPage" data-url="myHelp">
					<image src="../../static/power.png"></image>
					<text>我的助力课</text>
				</view>
			</view>
		</view>

		<block v-if="initInfo.enter_banner">
			<view class="bannerBox" v-if="!isLogin || userInfo.registAward == 0">
				<image class="myBanner" src="http://s.de123.com/myCoupon.png" mode="widthFix" @tap="toPage" data-url="newGift"></image>
			</view>
		</block>

		<!-- 推荐商品 -->
		<view class="rmdTitle">
			<image src="../../static/jingxuan.png"></image>
			<text>精选推荐</text>
		</view>
		<goodList :goodData="rmdList"></goodList>
		<!-- 登录的新组件 -->
		<uni-popup ref="popup" type="center" mask-click="false" @touchmove.stop.prevent="moveHandle">
			<newlogin @tap="close"></newlogin>
		</uni-popup>
	</view>
</template>

<script>
import goodList from '../../components/goodList/goodList.vue';
import myBar from '../../components/myBar/myBar.vue';
import COMM from '../../common/common.js';
import { mapState, mapGetters, mapMutation, mapActions } from 'vuex';
export default {
	components: {
		goodList,
		myBar
	},
	computed: {
		...mapState({
			userInfo: state => state.user.userInfo,
			isLogin: state => state.user.isLogin,
			selectCity: state => state.map.selectCity,
			initInfo: state => state.sys.initInfo,
			locationCity: state => state.map.locationCity
		})
	},
	data() {
		return {
			hasNext: true,
			rmdFilter: {
				page_no: 1,
				page_size: 10,
				areaId: 0
			},
			rmdList: [],
			barOpct: '0',
			oldlist:[],
			newlist:[],
			showmyold:false
			
		};
	},
	watch: {
		selectCity(newVal) {
			this.hasNext = true;
			this.rmdList = [];
			this.rmdFilter = {
				page_no: 1,
				page_size: 10,
				areaId: newVal.cityCode
			};
			this.getRmd();
		}
	},
	methods: {
		apimyoldnewstudent(){
			this.$store
				.dispatch('apimyoldnewstudent', {
					userId: this.userInfo.userId						
				})
				.then(res => {
					
					this.oldlist  = res.data.myWelfareCardMap.oldStudentCardList;
					this.newlist  = res.data.myWelfareCardMap.newStudentCardList;
					if(this.newlist.length>0 || this.oldlist.length >0){
						this.showmyold = true;
					}else{
						this.showmyold = false;
					}
					if(this.oldlist.length>2){
						var arrOld=[];
						for(var i=0;i<2;i++)
						{
						      var _num = Math.floor(Math.random()*this.oldlist.length)
						      var mm = this.oldlist[_num];
						      this.oldlist.splice(_num,1)
						      arrOld.push(mm)
						}					
						
						this.oldlist = arrOld
					}
				
			
					
					if(this.newlist.length>3){
						var arrNew=[];
						for(var i=0;i<3;i++)
						{
						      var _num = Math.floor(Math.random()*this.newlist.length)
						      var mm = this.newlist[_num];
						      this.newlist.splice(_num,1)
						      arrNew.push(mm)
						}					
						
						this.newlist = arrNew
					}
					
										
					
					
				});
		},
		getRmd() {
			this.rmdFilter.areaId = this.selectCity.cityCode;
			this.rmdFilter.guideCate = uni.getStorageSync('xinqu');
			if (this.hasNext) {
				this.$store.dispatch('apiGetRmdGoodList', this.rmdFilter).then(res => {
					this.rmdList = this.rmdList.concat(res.data.data.items);
					this.rmdFilter.page_no = res.data.data.nextPage;
					this.hasNext = res.data.data.hasNext;
				});
			} else {
				uni.showToast({
					title: '没有更多数据了',
					icon: 'none'
				});
			}
		},
		myzhaoshang(){
			if(this.isLogin){
				uni.navigateTo({
					url: '../../pagesB/myzhaoshang/myzhaoshang'
				});
			}else{
				this.open()
			}
			
		},
		// myHelp(){
		// 	uni.navigateTo({
		// 		url: '../../pagesB/myHelp/myHelp'
		// 	});
		// },
		open() {
			// 通过组件定义的ref调用uni-popup方法
			this.$refs.popup.open();
			
		},
		
		close() {
			// 通过组件定义的ref调用uni-popup方法
			this.$refs.popup.close();
			
		},
	
		toNewPage(e) {
			if (this.isLogin) {
				this.toPage(e);
			} else {
				// this.toPage('login');
				this.open()
			}
		},
		
		toSharePage(e) {
			uni.navigateTo({
				url: '../sharePageView/sharePageView?url=' + e.currentTarget.dataset.url
			});
		},
		toCvDt() {
			let _this = this;
			if (this.isLogin) {
				let toImid = 'user0';
				if (getApp().globalData.TIM_SDK_READY) {
					this.toPage({
						url: 'conversationDt',
						cvid: 'C2C' + toImid,
						toImId: toImid
					});
				} else {
					_this.$store.dispatch('timLogin', this.userInfo.imid).then(res => {
						uni.showLoading({
							title: '会话跳转中',
							mask: false
						});
						setTimeout(() => {
							uni.hideLoading();
							this.toPage({
								url: 'conversationDt',
								cvid: 'C2C' + toImid,
								toImId: toImid
							});
						}, 1000);
					});
				}
			} else {
				
				this.open()
			}
		},
		toOth() {
			uni.showToast({
				title: '该功能正在开发中，敬请期待',
				icon: 'none'
			});
		},
		copyCode() {
			uni.setClipboardData({
				data: this.userInfo.code,
				success: () => {
					uni.showToast({
						title: '邀请码复制成功',
						icon: 'none'
					});
				}
			});
		}
	},
	onShow() {
		this.apimyoldnewstudent()	
	},
	onLoad() {
		this.getRmd();
		uni.$on('roadsChange', () => {
			this.hasNext = true;
			this.rmdList = [];
			this.rmdFilter = {
				page_no: 1,
				page_size: 10,
				areaId: this.locationCity.adcode.substr(0, 4)
			};
			this.getRmd();
		});
		this.apimyoldnewstudent()
	},
	// 页面滚动到底部
	onReachBottom() {
		this.getRmd();
	},
	onPageScroll(e) {
		if (e.scrollTop > 150) {
			this.barOpct = '1';
		} else {
			this.barOpct = parseFloat(e.scrollTop / 150)
				.toFixed(2)
				.toString();
		}
	},
	onShareAppMessage(res) {
		return {
			title: '找培训正版',
			path: '/pages/my/my',
			imageUrl: '../../static/user_sr.png'
		};
	},
	// 下拉刷新
	onPullDownRefresh() {
		setTimeout(() => {
			this.getRmd();
			this.apimyoldnewstudent()
			uni.stopPullDownRefresh();
		}, 1500);
	}
};
</script>

<style lang="less">
.bannerBox {
	padding: 0 18upx;
	.myBanner {
		width: 100%;
		border-radius: 10upx;
	}
}

.myBg {
	background-color: #f4f4f4;
}

.userInfoBox {
	background-image: url('https://test.hawklu.com/capp/myBg.png');
	height: 318upx;
	background-size: 100% 100%;
	position: relative;

	.memberEnter {
		position: absolute;
		right: 0;
		bottom: 38upx;
		height: 46rpx;
		font-size: 26upx;
		color: #ffffff;
		line-height: 46upx;
		background-color: #e39e0f;
		border-top-left-radius: 23upx;
		border-bottom-left-radius: 23upx;
		display: flex;
		align-items: center;
		padding-left: 20upx;
	}

	.userInfo {
		position: absolute;
		top: 84upx;
		left: 35upx;
		display: flex;
		align-items: stretch;

		image {
			width: 120upx;
			height: 120upx;
			border-radius: 50%;
			margin-right: 34upx;
		}

		.infoBox {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: flex-start;
			.nameBox {
				display: flex;
				align-items: center;
			}
			.codeBox {
				margin-top: 10upx;
				display: flex;
				font-size: 24upx;
				height: 44upx;
				line-height: 40upx;
				border: 2upx solid #ffffff;
				border-radius: 22upx;
				color: #ffffff;
				overflow: hidden;
				.code {
					padding-left: 10upx;
				}
				.copy {
					height: 100%;
					background-color: #ffffff;
					color: #ffa200;
					padding: 0 10upx;
					margin-left: 10upx;
				}
			}
			.vipBox {
				display: flex;
				align-items: center;
				font-size: 24upx;
				background-color: #0f1117;
				color: #fffa74;
				padding: 4upx 8upx;
				border-radius: 6upx;
				.iconfont {
					font-size: 28upx;
					margin-right: 8upx;
				}
			}
			.userName {
				font-size: 36upx;
				font-weight: bold;
				color: #07080d;
				margin-right: 16upx;
			}

			.userId {
				font-size: 25upx;
				color: #9e7000;
			}
		}
	}

	.setBtnBox {
		position: absolute;
		top: 77upx;
		right: 35upx;
		z-index: 9;
		/* #ifdef MP */
		right: 30%;

		/* #endif */
		image {
			width: 44upx;
			height: 44upx;
			margin-left: 40upx;
			vertical-align: middle;
		}
	}

	.jjBox {
		position: absolute;
		left: 35upx;
		bottom: 38upx;

		text {
			font-size: 26upx;
			font-weight: bold;
			color: #07080d;
			line-height: 46upx;
		}

		.jjCount {
			display: inline-block;
			width: 206upx;
			height: 46upx;
			line-height: 46upx;
			border-radius: 23upx;
			box-sizing: border-box;
			background-image: url('~@/static/jijin.png');
			background-size: 100% 100%;
			text-align: center;
			color: #c9420d;
			padding-right: 60upx;
			margin-left: 14upx;
		}
	}
}

.orderEnter {
	margin: 14upx;
	background-color: #fdfdff;
	border-radius: 12rpx;

	.boxTitle {
		display: flex;
		padding: 18upx 18upx 0 18upx;
		align-items: center;

		.tt1 {
			font-size: 30upx;
			font-weight: bold;
			color: #07080d;
			flex: 1;
		}

		.tt2 {
			font-size: 26rpx;
			color: #9c9c9c;
		}

		.iconfont {
			margin-top: 4upx;
			font-size: 28rpx;
			color: #9c9c9c;
		}
	}

	.enterBox {
		display: flex;
		padding-top: 32upx;
		padding-bottom: 32upx;

		.enterItem {
			width: 25%;
			display: flex;
			flex-direction: column;
			align-items: center;
		}
		.enterItem2 {
			image {
				width: 75upx;
				height: 75upx;
			}
		}
		image {
			width: 67upx;
			height: 61upx;
			margin-bottom: 20upx;
		}

		text {
			text-align: center;
			font-size: 22rpx;
			color: #3b434d;
		}
	}

	.enterBox2 {
		image {
			width: 80upx;
			height: 80upx;
		}
	}
	.enterBox3{
		display: flex;
		justify-content: start;
		align-items: center;
		padding: 0 18rpx;
		.imgboxxx{
			margin-right: 10rpx;
			image {
				width: 130rpx;
				height: 230rpx;
			}
		}
		
	}

	.remindBox {
		padding-top: 32upx;
		padding-bottom: 17upx;
	}
}

.rmdTitle {
	display: flex;
	justify-content: center;
	align-items: center;
	padding-bottom: 20upx;

	image {
		width: 28upx;
		height: 25upx;
		margin-right: 10upx;
	}

	text {
		font-size: 26upx;
		color: #d92810;
	}
}
</style>
